<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="../css/webim_demo.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/friends.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
    <script src="../jss/lib/jquery/jquery-ui.js" type="text/javascript"></script>
    <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
    <script src="../jss/lib/bootstrap/bootstrap.js" type="text/javascript"></script>
    <script src="../jss/lib/bootstrap/bootstrap-table.js" type="text/javascript"></script>
    <script src="../jss/lib/bootstrap/bootstrap-collapse.js" type="text/javascript"></script>
    <script src="../jss/lib/xss.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js" type="text/javascript"></script>
    <script src="../js/aliyun-webrtc-sdk-1.7.0.min.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/html2canvas.min.js"></script>
    <script type="text/javascript" src="../js/canvas2image.js"></script>
</head>
<style>
    .submit{
        width: 40px;
        height: 25px;
        color: #fff;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        background: #54cae8;
        border-radius: 3px;
        display: none;
        margin-right: -2%;
        margin-left: 3%
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }

    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .content2{
        background: #fff;
        border-radius: 30px;
        position: relative;
        padding: 10px 15px;
        margin-right: 5%;
        max-width: 180px;
        word-break: break-all;
    }
    .info_wrap{
        position: fixed;
        width: 100%;
        height: 80%;
        overflow: auto;
    }
    .msgbody img{
        width: 100px
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }
    .className1,.className2{
        float: right;
    }
    .friend1,.friend2{
        float: left;
    }
    .timesss{
        text-align: center;
    }
    .msgflow .onemsg .msgbody{
        max-width: 80%;
    }
    a{
        text-decoration: none;
        color: #000;
    }
    .fr_nav{
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #fff;
        padding: 3% 0;
        z-index: 99999;
    }
    .fr_nav li{
        float: left;
        width: 25%;
        text-align: center;
    }
    video{
        width: 100%;
        height: 100%;
    }
    .emoji li{
        font-size: 25px;
    }
    .hongbao{
        background: url(../img/package.png) no-repeat;
        width: 200px;
        height: 65px;
        background-size: 100% 100%;
        text-align: center;
        line-height: 58px;
        color: #fff;
    }
    .sendhongbao{
        display: none;
    }
    .money{
        position: relative;
        margin: 20px 10px;
        background: #fff;
    }
    .money p{
        font-weight: bold;
        margin-left: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .money p:nth-of-type(2){
        right: 10px;
    }
    .money input,.wish input{
        width: 90%;
        text-align: right;
        border: none;
        outline: none;
        padding: 15px 0;
    }
    .wish{
        padding: 0 10px;
    }
    .wish input{
        width: 100%;
        text-align: left;
        text-indent: 15px;
        margin: 10px 0;
        font-size: 16px;
    }
    .total{
        margin-top: 50px;
        text-align: center;
        font-weight: bold;
    }
    .total p{
        font-size: 26px;
    }
    .total span{
        font-size: 34px;
    }
    .total div{
        background: #cbcbcb;
        color: #fff;
        padding: 10px 30px;
        display: inline-block;
        border-radius: 5px;
        margin-top: 20px;
        font-weight: normal;
    }
    .friend_bigwrap{
        width: 100%;
        height: auto;
        display: none;
        position: fixed;
        background: #fff;
        z-index: 999999;
        top: 43px;
        left: 0;
    }
    .friend_wrap li{
        float: left;
        width: 25%;
        text-align: center;
        line-height: 50px;
    }
    .friend_wrap li img{
        width: 50px;
        height: 50px;
        border-radius: 100%;
        display: inline-block;

    }
    .wrap>div{
        display: none;
    }
    .containerss{
        position: relative;
    }
    .containerss img{
        width: 100px;
        height: 100px;
    }
    .jd,.wd{
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        display: block;
    }
    .desc{
        width: 100%;
        line-height: 20px;
        background: #fff;
        color: #000;
        display: block;
        top:0;
        position: absolute;

    }
    .maps,.map3_wap{
        display: none;
        top:0%;
    }
    #container{
        display: none;
    }

    .sendmap,.map3_wap_send{
        position: absolute;
        /* right: 31px; */

        z-index: 99999;
        background: #ffff;
        width: 100%;
        color: #000;
        text-align: right;
        padding: 4%;

    }
    #map3{
        width: 100%;height:100%;position: absolute;z-index:9999;
    }
    .close_video{
        position: fixed;bottom: 10%;left: 0;right:0;margin: auto;width: 80px;height: 80px;border-radius:100%;z-index: 9999999;background: red;display: none;
    }
    #friend_blacklist{
    width: 100%;
    height: 80%;
    position: fixed;
    background: rgb(255, 255, 255);
    z-index: 999999;
    top: 43px;
    left: 0px;
    overflow: auto;
    }
    .black_list li{
    	padding: 3%;
    }
</style>
<body style="background: #fff !important">
<header>
    <a href="javascript:;" class="back backs"><img src="../img/back.png" height="18px"></a>
    <div class="center title">小静静</div>
</header>


<div class="aio" id="webim_demo" style="width: 100%;border: none;">
    <div class="titlebar" style="display: none;">
        <img id="p_my_face">
        <p id="t_my_name"></p>
        <ul id="t_my_menu">
            <li>菜单
                <ul>
                    <li>最近联系人
                        <ul>
                            <li id="getRecentContactListMenu" onclick="getRecentContactList()">最近联系人</li>
                        </ul>
                    </li>
                    <li>好友申请
                        <ul>
                            <li id="getPendencyMenu" onclick="getPendency(false)">查看好友申请</li>
                        </ul>
                    </li>
                    <li>好友
                        <ul>
                            <li id="searchProfileByUserIdMenu" onclick="searchProfileByUserIdClick()">搜索用户</li>
                            <li id="getAllFriendMenu" onclick="getMyFriend()">我的好友</li>
                        </ul>
                    </li>
                    <li>黑名单
                        <ul>
                            <li id="getBlackListMenu" onclick="getBlackList()">我的黑名单</li>
                        </ul>
                    </li>
                    <li>群组申请
                        <ul>
                            <li id="getApplyJoinGroupPendencyMenu" onclick="getApplyJoinGroupPendency()">查看加群申请</li>
                        </ul>
                    </li>
                    <li>群组
                        <ul>
                            <li id="searchGroupByNameMenu" onclick="searchGroupByNameMenuClick()">搜索群组(按名称)</li>
                            <li id="searchGroupMenu" onclick="searchGroupMenuClick()">搜索群组(按ID)</li>
                            <li id="createGroupMenu" onclick="createGroupMenuClick()">创建群组</li>
                            <li id="getMyGroupMenu" onclick="getMyGroup()">我的群组</li>
                            <li id="sendCustomGroupNofifyMenu" onclick="showSendCustomGroupNotifyDialog()">发送群自定义通知</li>
                        </ul>
                    </li>
                    <li>系统消息
                        <ul>
                            <li id="getMyGroupSystemsMenu" onclick="getMyGroupSystemMsgs()">我的群组系统消息</li>
                            <li id="getMyFriendSystemsMenu" onclick="getMyFriendSystemMsgs()">我的好友系统消息</li>
                            <li id="getMyProfileSystemsMenu" onclick="getMyProfileSystemMsgs()">我的资料系统消息</li>
                        </ul>
                    </li>
                    <!--<li>图片-->
                    <!--<ul>-->
                    <!--<li id="uploadPicByBase64Menu" onclick="uploadPicByBase64()">上传图片(Base64)</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <li>设置
                        <ul>
                            <li id="setProfilePortraitMenu" onclick="setProfilePortraitClick()">个人资料</li>
                            <li id="quitMenu" onclick="quitClick()">退出</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div aria-hidden="true" aria-labelledby="get_my_friend_dialog_label" class="modal fade" data-backdrop="static" id="get_my_friend_dialog"
         role="dialog" tabindex="-1" style="z-index: 99999">
        <div class="modal-dialog-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title" id="get_my_friend_dialog_label">我的好友</h4>
                </div>
                <div class="modal-body">
                    <table id="get_my_friend_table"></table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="sesspart" style="position: fixed;top: 0;width: 100%;height:100%;overflow: auto;display: block;z-index: 9999;background: #fff">
        <header  style="position: absolute;top: 0;width: 100%;height:43px;z-index: 9999;background: #fff">
            <a href="message.html" class="back"><img src="../img/back.png" height="18px"></a>
        </header>
        <div class="wrap">
            <div class="accordion" id="accordionContact">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-parent="#accordionContact" data-toggle="collapse" href="#collapseRecentSession">最近联系人</a>
                    </div>
                    <div class="accordion-body collapse in" id="collapseRecentSession" style="background: #fff">
                        <div class="sesslist" style="background: #fff;height: auto;border: none;"></div>

                    </div>
                </div>
            </div>
            <div class="content" id="content" style="display: none;position: fixed;width: 100%;height:85%;left: 0;top: 43px;background: #fff;z-index: 999999;padding: 0;margin-left: 0;overflow: auto;">

            </div>
            <div class="friend_bigwrap">
                <form class="form-inline" id="sp_form" name="sp_form" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="sp_to_account">帐号</label>
                        <input class="form-control" id="sp_to_account" maxlength="50" onkeydown="if(event.keyCode==13)return false;"
                               placeholder="请输入用户ID" type="text">
                        <button class="btn btn-default" onclick="searchProfileByUserId()" type="button">搜索</button>
                    </div>

                </form>
                <div class="friend_wrap">

                </div>
            </div>
            <div id="friend_blacklist">

            </div>
        </div>
        <ul class="fr_nav clearfix">
            <li class="cccc">最近联系人</li>                                                                                                                                                                                     
            <li class="myfriends" onclick="getMyFriend()">我的好友</li>
            <li class="add_friend">添加好友</li>
            <li onclick="getBlackList()">黑名单</li>
        </ul>
    </div>

    <div class="chatpart" style="margin: 0;float: none;width: 100%;position: fixed;height:97%;top:6%;overflow: auto;">
        <div class="msgflow" style="width: 100%;height: 88%;border: none"></div>
        <span id="msg_end" style="overflow:hidden"></span>
        <div class="editbar" style="display: none">
            <a class="chat02_title_btn ctb01" onclick="showEmotionDialog()" title="选择表情"></a>
            <a class="chat02_title_btn ctb03" href="#" onclick="selectPicClick()" title="选择图片"></a>
            <a class="chat02_title_btn ctb05" href="#" onclick="selectFileClick()" title="选择文件"></a>
            <a class="chat02_title_btn ctb04" href="#" onclick="showEditCustomMsgDialog()" title="发送自定义消息"></a>
            <div class="wl_faces_box" id="wl_faces_box">
                <div class="wl_faces_content">
                    <div class="title">
                        <ul>
                            <li class="title_name">常用表情</li>
                            <li class="wl_faces_close">
                                <span onclick='turnoffFaces_box()'>&nbsp;</span>
                            </li>
                        </ul>
                    </div>
                    <div class="wl_faces_main" id="wl_faces_main">
                        <ul id="emotionUL"></ul>
                    </div>
                </div>
                <div class="wlf_icon"></div>
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
<div class="info_wrap msgflow" id='webim_demo' style="display:none;">

</div>
<!-- 添加好友 -->

<div id="container" style="width: 100%;height: 100%;position: fixed;top: 0"></div>
<div class="maps" style="width: 100%;height: 100%;position: fixed;">
    <div class="sendmap">
        <span style="float: left;" class="qx">取消</span>
        <span style="float: right;" class="send_maps">发送</span>
    </div>
    <div id='containers' style='width: 100%;height:100%;position: absolute;z-index:9999;'></div>
</div>



<footer>
    <div class="flex">
        <div class="import">
            <input type="text" class="msgedit" style="width: 100%;height: 35px" id="send_msg_text" onkeydown="onTextareaKeyDown()"  placeholder="请输入消息">
            <span class="box" onclick="showEmotionDialog()">
        <img src="../img/smile.png" class="smile">
        <img src="../img/smile-s.png">
      </span>
        </div>
        <div class="add" style="width: 25px;
    height: 25px;
    color: #999;
    border: 1.5px solid #999;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
    font-size: 20px;
    padding: 2px;
    margin-left: 5%;">+</div>
        <div class="submit sendbtn" onclick="onSendMsg()">发送</div>
    </div>
    <div class="emoji">
        <ul class="flex emoji-p">
            <li>😠</li>
            <li>😩</li>
            <li>😲</li>
            <li>😞</li>
            <li>😵</li>
            <li>😰</li>
            <li>😒</li>
            <li>😍</li>
            <li>😤</li>
            <li>😜</li>
            <li>😝</li>
            <li>😋</li>
            <li>😘</li>
            <li>😚</li>
            <li>😷</li>
            <li>😳</li>
            <li>😃</li>
            <li>😅</li>
            <li>😆</li>
            <li>😁</li>
            <li>😂</li>
    </div>
    </div>
    <div class="addcon flex">
        <div class="tonghua">
            <img src="../img/c1.png">
            <p>语音通话</p>
        </div>
        <div class="video_chatbtn">
            <img src="../img/c2.png">
            <p>视频聊天</p>
        </div>
        <div class="ctb03" onclick="selectPicClick()">
            <img src="../img/c3.png">
            <p>照片/视频</p>
        </div>
        <div class="sendweizhi">
            <img src="../img/c4.png">
            <p>发送位置</p>
        </div>
        <div>
            <a href="javascript:;" class="fahbbtn">
                <img src="../img/c5.png">
                <p>发红包</p>
            </a>
        </div>
    </div>
</footer>
<div aria-hidden="true" style="opacity: 0" aria-labelledby="login_dialog_label" class="modal fade" data-backdrop="static" id="login_dialog"
     role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="login_dialog_label">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="login_account">identifier</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="login_account" maxlength="100" placeholder="请输入identifier" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="login_pwd">UserSig</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="login_pwd" placeholder="请输入UserSig" type="text" value="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" id="click" onclick="independentModeLogin()" type="button">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- <div class="userSig" style="opacity: 0;position: absolute;left: 0;top: 0"></div> -->
<div aria-hidden="true" aria-labelledby="upload_pic_low_ie_dialog_label" class="modal fade" data-backdrop="static" id="upload_pic_low_ie_dialog"
     role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="upload_pic_low_ie_dialog_label">发送图片</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" enctype="multipart/form-data" id="updli_form" name="updli_form" onkeydown="if(event.keyCode==13)return false;"
                      role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="File">选择</label>
                        <div class="col-sm-10">
                            <input id="updli_file" type="file">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" onclick="uploadPicLowIE()" type="button">发送</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div aria-hidden="true" aria-labelledby="upload_pic_dialog_label" class="modal fade" data-backdrop="static" id="upload_pic_dialog"
     role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="upload_pic_dialog_label">发送图片</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="upd_form" name="upd_form" onkeydown="if(event.keyCode==13)return false;" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="File">选择</label>
                        <div class="col-sm-10">
                            <input id="upd_pic" onchange="fileOnChange(this)" type="file">
                            <!--<input type="button" value="停止" id="upd_abort" />-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="File">预览</label>
                        <div class="col-sm-10">
                            <div id="previewPicDiv"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="upd_progress">进度</label>
                        <div class="col-sm-10">
                            <progress id="upd_progress" max="100" value="0"></progress>
                            <!--<input type="text" id="upd_progress" value="0" name="upd_progress" />-->
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" onclick="uploadPic()" type="button">发送</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div aria-hidden="true" aria-labelledby="delete_friend_dialog_label" class="modal fade" data-backdrop="static" id="delete_friend_dialog"
     role="dialog" tabindex="-1" style="z-index: 999999">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="delete_friend_dialog_label">删除好友</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;" role="form">
                    <input id="df_sel_row_index" type="hidden">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="df_to_account">对方帐号</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="df_to_account" placeholder="请输入对方帐号" readonly="readonly" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="df_type_radio">操作</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input checked id="df_type_both_radio" name="df_type_radio" type="radio" value="Delete_Type_Both"> 双向删除</label>
                            <label class="radio-inline">
                                <input id="df_type_single_radio" name="df_type_radio" type="radio" value="Delete_Type_Single"> 单向删除</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" onclick="deleteFriend()" type="button">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div aria-hidden="true" aria-labelledby="click_pic_dialog_label" class="modal fade" data-backdrop="static" id="click_pic_dialog"
     role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="click_pic_dialog_label">查看图片</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div id="bigPicDiv"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <!--<button type="button" class="btn btn-primary" id="viewOriPicBt">
                          查看原图
                        </button>-->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--  <div aria-hidden="true" aria-labelledby="get_black_list_dialog_label" class="modal fade" data-backdrop="static" id="get_black_list_dialog"
 role="dialog" tabindex="-1" style="z-index: 999999">
 <div class="modal-dialog-wide">
   <div class="modal-content">
     <div class="modal-header">
       <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
       <h4 class="modal-title" id="get_black_list_dialog_label">我的黑名单</h4>
     </div>
     <div class="modal-body">
       <table id="get_black_list_table"></table>
     </div>
     <div class="modal-footer">
       <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
     </div>
   </div>

 </div>

</div> -->


<div class='sendhongbao' style="position: fixed;width: 100%;height: 100%;background: #fff;left: 0;top: 0">
    <header style="padding: 3%">
        <a href="javascript:;" class="quxiaohongbao" style="position: absolute;">取消</a>
        <div class="center">发美金</div>
    </header>
    <div class="money">
        <p>总金额</p>
        <input type="text" name="" id="ecm_data" placeholder="0.00">
        <p>元</p>
    </div>
    <div class="wish">
        <input type="text" name="" id="ecm_desc" value="恭喜发财，大吉大利">
    </div>
    <div class="total">
        <p>￥<span>0.00</span></p>
        <a href='javascript:;' class="sendhongbao_btn"><div>塞钱进红包</div></a>
    </div>
    <input type="hidden" id="ecm_ext" value="红包">
</div>

<div class="map2_wrap" style="position: fixed;z-index: -1;left: 0;width: 200px;height: 200px">
    <div id="map2" style="width: 200px;height: 200px;"></div>
</div>
<div class="map3_wap" style="position: fixed;width: 100%;height: 100%;z-index: 999999;top: 0;">
    <div class="map3_wap_send clearfix">
        <span style="float: left;" class="map3_wap_send_qx">取消</span>
        <a style="float: right;" class="map3_wap_send_dz">到这去</a>
    </div>
</div>


</body>

</html>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4f31b72d3e1631bf3b833d85cbe6d6c5"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://tls.qcloud.com/libs/api.min.js" type="text/javascript"></script>
<!--用于获取文件MD5 js api(发送图片时用到)-->

<script src="../jss/lib/md5/spark-md5.js" type="text/javascript"></script>
<!--web im sdk-->

<script src="../sdk/webim.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->

<script src="../sdk/json2.js" type="text/javascript"></script>
<!--web im sdk 登录 示例代码-->

<script src="../jss/login/login.js" type="text/javascript"></script>
<!--web im sdk 登出 示例代码-->

<script src="../jss/logout/logout.js" type="text/javascript"></script>
<!--web im 解析一条消息 示例代码-->

<script src="../jss/common/show_one_msg.js" type="text/javascript"></script>
<!--web im demo 基本逻辑-->

<script src="../jss/base.js" type="text/javascript"></script>
<!--web im sdk 资料管理 api 示例代码-->

<script src="../jss/profile/profile_manager.js" type="text/javascript"></script>
<!--web im sdk 好友管理 api 示例代码-->

<script src="../jss/friend/friend_manager.js" type="text/javascript"></script>
<!--web im sdk 好友申请管理 api 示例代码-->

<script src="../jss/friend/friend_pendency_manager.js" type="text/javascript"></script>
<!--web im sdk 好友黑名单管理 api 示例代码-->

<script src="../jss/friend/friend_black_list_manager.js" type="text/javascript"></script>
<!--web im sdk 最近联系人 api 示例代码-->

<script src="../jss/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
<!--web im sdk 群组管理 api 示例代码-->

<script src="../jss/group/group_manager.js" type="text/javascript"></script>
<!--web im sdk 群成员�����理 api 示例代码-->

<script src="../jss/group/group_member_manager.js" type="text/javascript"></script>
<!--web im sdk 加群申请管理 api 示例代码-->

<script src="../jss/group/group_pendency_manager.js" type="text/javascript"></script>
<!--web im 切换聊天好友或群组 示例代码-->

<script src="../jss/switch_chat_obj.js" type="text/javascript"></script>
<!--web im sdk 获取c2c获取群组历史消息 示例代码-->

<script src="../jss/msg/get_history_msg.js" type="text/javascript"></script>
<!--web im sdk 发送普通消息(文本和表情) api 示例代码-->

<script src="../jss/msg/send_common_msg.js" type="text/javascript"></script>
<!--web im sdk 上传和发送图片消息 api 示例代码-->

<script src="../jss/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
<!--web im sdk 上传和发送文件消息 api 示例代码-->

<script src="../jss/msg/upload_and_send_file_msg.js" type="text/javascript"></script>
<!--web im sdk 切换播放语音消息 示例代码-->

<script src="../jss/msg/switch_play_sound_msg.js" type="text/javascript"></script>
<!--web im sdk 发送自定义消息 api 示例代码-->

<script src="../jss/msg/send_custom_msg.js" type="text/javascript"></script>
<!--web im sdk 发送群自定义通知 api 示例代码-->

<script src="../jss/msg/send_custom_group_notify_msg.js" type="text/javascript"></script>
<!--web im 监听新消息(c2c或群) 示例代码-->

<script src="../jss/msg/receive_new_msg.js" type="text/javascript"></script>
<!--web im 监听群系统通知消息 示例代码-->

<script src="../jss/msg/receive_group_system_msg.js" type="text/javascript"></script>
<!--web im 监听好友系统通知消息 示例代码-->

<script src="../jss/msg/receive_friend_system_msg.js" type="text/javascript"></script>
<!--web im 监听资料系统通知消息 示例代码-->

<script src="../jss/msg/receive_profile_system_msg.js" type="text/javascript"></script>


<script src="../jss/lib/BenzAMRRecorder.js" type="text/javascript"></script>
<!-- web im 让h5支持播放amr录音文件 -->
<script src="../js/friends.js"></script>

<script type="text/javascript">
    //定义替换参数的方法
    var thisurl=window.location.href;
    function changeURLArg(url,arg,arg_val){
        var pattern=arg+'=([^&]*)';
        var replaceText=arg+'='+arg_val;
        if(url.match(pattern)){
            var tmp='/('+ arg+'=)([^&]*)/gi';
            tmp=url.replace(eval(tmp),replaceText);
            return tmp;
        }else{
            if(url.match('[\?]')){
                return url+'&'+replaceText;
            }else{
                return url+'?'+replaceText;
            }
        }
        return url+'\n'+arg+'\n'+arg_val;
    }
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    //接收URL中的参数id
    var id = getUrlParam('id');
    var uImg = localStorage.getItem('uImg');
    var uCount = localStorage.getItem('uCount');
    $('.msgedit').keyup(function () {
        if($(this).val()!=''){
            $('.add').hide();
            $('.submit').show()
        }else {
            $('.add').show();
            $('.submit').hide()
        }
    });

    // 将以下两个参数替换成您的配置
    var sdkAppID = '1400204816'; // 填写第一步获取到的 sdkappid
    //var accountType = ''; // 填写第二步设置账号体系集成获取到的 accountType , 已废弃
    // 登录帐号
    var identifier = uCount, // 填写第三步输入的 identifier，由您指定，可以在登录页面直接输入
        userSig=localStorage.getItem('userSig'); //填写第三步生成的userSig，可以在登录页面直接输入

    //帐号模式，0-表示独立模式，1-表示托管模式(托管模式已经停用，请使用独立模式集成帐号)
    var accountMode = 0;
    //当前用户身份
    var loginInfo = {
        'sdkAppID': sdkAppID, //用户所属应用id,必填
        // 'accountType': accountType, //用户所属应用帐号类型，必填 , 已废弃
        'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
        'userSig': userSig,
        //当前用户身份凭证，必须是字符串类型，必填
        'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
        'headurl': uImg //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
    };

    var AdminAcount = 'qwe101';
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = id; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义

    var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。

    //默认好友头像
    var friendHeadUrl = '../img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
    //默认群头像
    var groupHeadUrl = '../img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况

    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


    var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
    var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

    var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
    var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

    var emotionFlag = false; //是否打开过表情选择框

    var curPlayAudio = null; //当前正在播放的audio对象

    var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
    var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

    var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到

    //监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
    var onGroupSystemNotifys = {
        "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
        "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
        "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
        "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
        "5": onDestoryGroupNotify, //群被解散(全员接收)
        "6": onCreateGroupNotify, //创建群(创建者接收)
        "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
        "8": onQuitGroupNotify, //主动退群(主动退出者接收)
        "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收)
        "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
        "11": onRevokeGroupNotify, //群已被回收(全员接收)
        "15": onReadedSyncGroupNotify, //群消息已读同步通知
        "255": onCustomGroupNotify, //用户自定义通知(默认全员接收)
        "12": onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
    };

    //监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
    var onFriendSystemNotifys = {
        "1": onFriendAddNotify, //好友表增加
        "2": onFriendDeleteNotify, //好友表删除
        "3": onPendencyAddNotify, //未决增加
        "4": onPendencyDeleteNotify, //未决删除
        "5": onBlackListAddNotify, //黑名单增加
        "6": onBlackListDeleteNotify //黑名单删除
    };

    var onC2cEventNotifys = {
        "92": onMsgReadedNotify, //消息已读通知,
        "96": onMultipleDeviceKickedOut
    };

    //监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
    var onProfileSystemNotifys = {
        "1": onProfileModifyNotify //资料修改
    };

    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
        var info;
        switch (resp.ErrorCode) {
            case webim.CONNECTION_STATUS.ON:
                webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
                break;
            case webim.CONNECTION_STATUS.OFF:
                info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
                // alert(info);
                webim.Log.warn(info);
                break;
            case webim.CONNECTION_STATUS.RECONNECT:
                info = '连接状态恢复正常: ' + resp.ErrorInfo;
                // alert(info);
                webim.Log.warn(info);
                break;
            default:
                webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
                break;
        }
    };

    //IE9(含)以下浏览器用到的jsonp回调函数
    function jsonpCallback(rspData) {
        webim.setJsonpLastRspData(rspData);
    }

    //监听事件
    var listeners = {
        "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
        ,
        "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
        ,
        "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
        ,
        "onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
        ,
        "onGroupSystemNotifys": onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填
        ,
        "onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填
        ,
        "onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
        ,
        "onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
        ,
        "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
        ,
        "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
        ,
        "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
        ,
        "onLongPullingNotify": function (data) {
            console.debug('onLongPullingNotify', data)
        }
    };

    var isAccessFormalEnv = true; //是否访问正式环境

    var isLogOn = false; //是否开启sdk在控制台打印日志

    //初始化时，其他对象，选填
    var options = {
        'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
        'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
    }



    var msgflow = document.getElementsByClassName("msgflow")[0];
    var bindScrollHistoryEvent = {
        init: function () {
            msgflow.onscroll = function () {
                if (msgflow.scrollTop == 0) {
                    msgflow.scrollTop = 10;
                    if (selType == webim.SESSION_TYPE.C2C) {
                        getPrePageC2CHistoryMsgs();
                        
                    } else {
                        getPrePageGroupHistoryMsgs();
                    }

                }
            }
        },
        reset: function () {
            msgflow.onscroll = null;
        }
    };
    function selhistory(){
        var lastMsgTime=0;
        var msgKey='';
        var optionss = {
            'Peer_Account': selToID, //好友帐号
            'MaxCnt': reqMsgCount, //拉取消息条数
            'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
            'MsgKey': msgKey
        };
        selSess = null;
        webim.MsgStore.delSessByTypeId(selType, selToID);


        webim.getC2CHistoryMsgs(
            optionss,
            function(resp) {
                var complete = resp.Complete; //是否还有历史消息可以拉取，1-表示没有，0-表示有

                if (resp.MsgList.length == 0) {
                    webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
                    return;
                }
                getPrePageC2CHistroyMsgInfoMap[selToID] = { //保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
                    'LastMsgTime': resp.LastMsgTime,
                    'MsgKey': resp.MsgKey
                };
                //清空聊天界面
                document.getElementsByClassName("msgflow")[0].innerHTML = "";
                if (cbOk)
                    cbOk(resp.MsgList);
            },
            function(errr) {
                console.log(errr);
            },
        );
    }


    $('.submit').click(function(){
        $(this).hide();
        $('.add').show();
    })
    $('#login_dialog').modal('show');
    $(function(){

        $('#login_account').val(uCount);
        $('#login_pwd').val(userSig);
        setTimeout(function () {
            $('#click').click();

        },500)
    });





    $('.cccc').click(function(){
        $('.sesspart').show()
    });

    $.each($('#emotionUL li'),function(){
        var index=$(this).index();
        $(this).find('img').attr('id',index);
    })
    var hvuex = {
        publisherList: []
    }
    var channelId;
    var token;
    var nonce;
    var timestamp;
    var appid='txz2zhcn';
    instanceId = 'post-cn-45915r0fw1h';//实例 ID，购买后从控制台获取
    host = 'post-cn-45915r0fw1h.mqtt.aliyuncs.com';// 设置当前用户的接入点域名，接入点获取方法请参考接入准备章节文档，先在控制台创建实例
    port = 443;//WebSocket 协议服务端口，如果是走 HTTPS，设置443端口
    topic = 'rtc/video_chat';//需要操作的 Topic,第一级父级 topic 需要在控制台申请
    useTLS = true;//是否走加密 HTTPS，如果走 HTTPS，设置为 true
    accessKey = 'LTAIvKcmvWQ80zRM';//账号的 AccessKey，在阿里云控制台查看
    secretKey = '09bBSKCP1j6Aer2fjRo3w5uDBMEmO0';//账号的的 SecretKey，在阿里云控制台查看
    cleansession = true;
    groupId = 'GID_video_group';//MQTT GroupID,创建实例后从 MQTT 控制台创建
    clientId = groupId + '@@@'+uCount;//GroupId@@@DeviceId，由控制台创建的 Group ID 和自己指定的 Device ID 组合构成

    var mqtt;
    var reconnectTimeout = 2000;
    var username = 'Signature|' + accessKey + '|' + instanceId;//username和 Password 签名模式下的设置方法，参考文档 https://help.aliyun.com/document_detail/48271.html?spm=a2c4g.11186623.6.553.217831c3BSFry7
    var password = CryptoJS.HmacSHA1(clientId, secretKey).toString(CryptoJS.enc.Base64);
    function MQTTconnect() {
        mqtt = new Paho.MQTT.Client(
            host,//MQTT 域名
            port,//WebSocket 端口，如果使用 HTTPS 加密则配置为443,否则配置80
            clientId//客户端 ClientId
        );
        var options = {
            timeout: 3,
            onSuccess: onConnect,
            mqttVersion: 4,
            onFailure: function (message) {
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;
        if (username != null) {
            options.userName = username;
            options.password = password;
            options.useSSL = useTLS;//如果使用 HTTPS 加密则配置为 true
        }
        mqtt.connect(options);
    }
    function onConnect() {

    }
    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
    };
    function onMessageArrived(message) {
        var topic = message.destinationName;
        var payload = message.payloadString;
        console.log("recv msg : " + topic + "   " + payload);
            if(topic!="rtc/video_chat/" && topic!="rtc/notice_video_chat/"){
            	var gslb =  "https://rgslb.rtc.aliyuncs.com";
                var imgs=JSON.parse(payload);
                var chat_type=imgs.chat_type;
                if(chat_type=='notice_video'){
                    var fromUser=imgs.fromUser;
                    layer.confirm('确定要接听吗?',function(){
                        var topicc='rtc/video_chat/'
                        mqtt.subscribe(topicc, {qos: 0});
                        var json = '{"fromUser":"'+fromUser+'","toUser":"'+uCount+'"}'
                        message = new Paho.MQTT.Message(json);//set body
                        message.destinationName = topicc;// set topic
                        mqtt.send(message);
                    })
                }else if(chat_type=="video"){
                	    layer.msg(1);
                	    console.log(1);
                        channelId=imgs.channelId;
                        token=imgs.token;
                        timestamp=imgs.timestamp;
                        nonce=imgs.nonce;
                        window.android.videoChat(channelId,appid,gslb, nonce, timestamp, uCount, token,"测试")
                }           
            }

      
    };

    MQTTconnect();


    var aliWebrtc;
    function init() {
        aliWebrtc = new AliRtcEngine("");
        // remote流发布事件
        aliWebrtc.on('onPublisher', (publisher) => {
            hvuex.publisherList.push(publisher);
            receivePublish(publisher);
        });
        // remote流结束发布事件
        aliWebrtc.on('onUnPublisher', (publisher) => {
            var publisherInfo = hvuex.publisherList.filter(item => {
                return item.publisherId === publisher.publisherId;
            });
            publisherInfo.length > 0 ? removePublish(publisherInfo[0]) : '';
        });
        //错误信息
        aliWebrtc.on('onError', (error) => {
            var msg = error && error.message ? error.message : error;
            alert(msg);
        });

        //订阅remote流成功后，显示remote流
        aliWebrtc.on('onMediaStream', (subscriber, stream) => {
            if (subscriber.publishId != subscriber.subscribeId) {
                var publisher = hvuex.publisherList.filter(item => {
                    return item.publisherId === subscriber.publishId;
                });
                publisher.length > 0 ? publisher[0].subscribeId = subscriber.subscribeId : '';
                var video = getDisplayRemoteVideo(subscriber.publishId, subscriber.subscribeId, subscriber.displayName);
                aliWebrtc.setDisplayRemoteVideo(subscriber, video, stream)
            }
        });

        aliWebrtc.on('OnConnecting', (data) => {
            console.log(data.displayName + "正在建立连接中...");
        });
        aliWebrtc.on('OnConnected', (data) => {
            console.log(data.displayName + "成功建立连接");
        });
        aliwebrtc.on('onJoin',(data) =>{
            console.log(data.displayName  + " 加入频道");
        });
        aliWebrtc.on('onLeave', (data) => {
            var publisher = hvuex.publisherList.filter(item => {
                return item.userId === data.userId;
            });
            publisher.length > 0 ? removePublish(publisher[0]) : '';
        })


        //1.预览
        var localVideo = $('.local-video video');
        aliWebrtc.startPreview(localVideo[0]).then((obj) => {
            // var localVideo = $('.local-video video');
            // localVideo[0].srcObject = obj.stream;
            //2. 获取频道鉴权令牌参数

            //3. 加入房间
            aliWebrtc.joinChannel({
                "appid": appid,
                "userid": uCount,
                "channel":channelId,
                "nonce":nonce,
                "timestamp": timestamp,
                "token": token,
                "gslb": [
                    "https://rgslb.rtc.aliyuncs.com"
                ]
            },uCount).then(() => {
                console.log('加入房间成功');
                // 4. 发布本地流
                aliWebrtc.publish().then((res) => {
                    console.log('发布流成功');
                }, (error) => {
                    alert(error.message);
                    console.log(error.message);
                });
            }).catch((error) => {
                alert(error.message);
                console.log(error.message);
            })

        }).catch((error) => {
            alert(error.message);
            console.log(error.message);
        });
        
    }
    /*init*/

    var receivePublish = (publisher) => {
        var publisherId = publisher.publisherId,
            displayName = publisher.displayName;
        //5.订阅remote流
        aliWebrtc.subscribe(publisherId).then((subscribeCallId) => {
            console.log('订阅成功')
        }, (error) => {
            alert(error.message);
        });
    };

    var removePublish = (publisher) => {
        var id = publisher.subscribeId + '_' + publisher.publisherId;
        var videoWrapper = $('#' + id);
        videoWrapper ? videoWrapper.remove() : '';
    }

    var getDisplayRemoteVideo = function (publisherId, subscribeCallId, displayName) {
        var id = subscribeCallId + '_' + publisherId;
        var videoWrapper = $('#' + id);
        if (videoWrapper.length == 0) {
            videoWrapper = $('<div class="remote-subscriber" id=' + id + '> <video autoplay playsinline></video><div class="display-name"></div></div>');
            $('.video-container').append(videoWrapper);
        }
        videoWrapper.find('.display-name').text(displayName);
        return videoWrapper.find('video')[0];
    }

    
        $('.close_video').click(function(){

            /*aliwebrtc.unPublish().then((obj)=>{
                alert('取消发布流成功')
            } ,(error)=>{
                console.log(error.message);
            });
            aliwebrtc.leaveChannel().then((obj)=>{
                alert('离开房间');
            } ,(error)=>{
                console.log(error.message);
            });*/
            $('.local-video').css('z-index',-1);
            $('.video-container').css('z-index',-1);
            $(this).hide();
        });
    
    /*  $('.channel-input button').click(() => {
        var value = $('.channel-input input').val();
        if (!value) {
          return;
        }
        aliWebrtc.leaveChannel();
        location.href = './index.html?channel=' + value;
      });




      window.onbeforeunload = function (e) {
        aliWebrtc.leaveChannel();
        aliWebrtc.dispose();
      };*/


    $('.video_chatbtn').click(function(){
        // Connection succeeded; subscribe to our topic
        /*$('.close_video').show();
        $('.local-video').css('z-index',99999);
        $('.video-container').css('z-index',99998);*/
        var topicc='rtc/notice_video_chat/'
        mqtt.subscribe(topicc, {qos: 0});
        var json = '{"fromUser":"'+uCount+'","toUser":"'+id+'"}'
        message = new Paho.MQTT.Message(json);//set body
        message.destinationName = topicc;// set topic
        //发送 P2P 消息，topic 设置方式参考https://help.aliyun.com/document_detail/96176.html?spm=a2c4g.11186623.6.586.694f7cb4oookL7
        /*message = new Paho.MQTT.Message("Hello mqtt P2P Msg!!");//set body
        message.destinationName = topic + "/p2p/" + groupId + '@@@server_manager';// set topic*/
        mqtt.send(message);
    });

    // $('.modal-dialog').attr('style','display:none;background:none;opacity:0;');
    $('.tonghua').click(function(){

        console.log(id);


    });
    function getCaption(obj){
        var index=obj.lastIndexOf("\_");
        obj=obj.substring(index+1,obj.length);
//  console.log(obj);
        return obj;
    }
    $(document).on('click','.sesslist div',function(){
        var state = {title:'',url:window.location.href};
        $('.sesspart').hide();
        var vv=$(this).attr('id');
        var ii=getCaption(vv);
        console.log(ii);
        history.pushState(state,'','friendsss.html?id='+ii);
        $('.title').html($('#nameDiv_'+ii).html());
        id=ii;
        console.log(id);
    });
    $('.sendmsg').click(function(){
        var ucccon=$(this).parent().parent().find('#scm_to_account').val();
        var state = {title:'',url:window.location.href};
        history.pushState(state,'','friendsss.html?id='+ucccon);
        $('.sesspart').hide();
        $('.title').html($('#nameDiv_'+ucccon).html());
        id=ucccon;
    });
    $('.backs').click(function(){
        $('.sesspart').show();
    });
    /*$('.myfriends').click(function(){
    $('#content').show();

    })*/
    $('.emoji li').click(function(){
        var val=$('.msgedit').val();
        var html=$(this).html();
        $('.msgedit').val(val+html);
        $('.emoji').removeClass('c-emoji');
        $('.submit').show();
        $('.add').hide();
        $('.box').children('img').css('display','none')
        $('.box').children('img').eq(0).css('display','block')
        flag=true;
    });
    $('.fahbbtn').click(function(){
        $('.sendhongbao').show();
    });
    $('.quxiaohongbao').click(function(){
        $('.sendhongbao').hide();
    });

    $('.sendhongbao_btn').click(function(){
        var meijin=$('#ecm_data').val();

        layer.confirm('确定给'+id+'发红包吗?',{btn: ['确定', '取消'], title: "提示"},function(){

            $.post('/meiyou/faHongBao',{hUBcount:id,hMessage:meijin,hMeijin:meijin},function(data){
                console.log(data);
                var hid=data.extend.hId;
                console.log(hid);
                if (!selToID) {
                    alert("您还没有好友或群组，暂不能聊天");
                    return;
                }
                var data = $("#ecm_data").val();
                var desc = $("#ecm_desc").val();
                var ext = $("#ecm_ext").val();

                var msgLen = webim.Tool.getStrBytes(data);

                var html="<div class='hongbao' data_hongbao='"+hid+"' style='position:relative;'>"+"<p class='hb_price' style='position: absolute;opacity: 0;left:0;'>"+data+"美金"+"</p>"+"<p>"+desc+"</p>"+"</div>";

                if (data.length < 1) {
                    alert("发送的消息不能为空!");
                    return;
                }
                var maxLen, errInfo;
                if (selType == webim.SESSION_TYPE.C2C) {
                    maxLen = webim.MSG_MAX_LENGTH.C2C;
                    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
                } else {
                    maxLen = webim.MSG_MAX_LENGTH.GROUP;
                    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
                }
                if (msgLen > maxLen) {
                    alert(errInfo);
                    return;
                }

                if (!selSess) {
                    selSess = new webim.Session(selType, selToID, selToID, friendHeadUrl, Math.round(new Date().getTime() / 1000));
                }
                var msg = new webim.Msg(selSess, true, -1, -1, -1, loginInfo.identifier, 0, loginInfo.identifierNick);
                var custom_obj = new webim.Msg.Elem.Custom(html, desc, ext);
                msg.addCustom(custom_obj);
                //调用发送消息接口
                msg.sending = 1;
                webim.sendMsg(msg, function(resp) {
                    addMsg(msg);
                    $("#id_" + msg.random).find(".spinner").remove();
                    // if (selType == webim.SESSION_TYPE.C2C) {
                    //     //私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
                    //     addMsg(msg);
                    // }
                    // $('#edit_custom_msg_dialog').modal('hide');
                    $('.sendhongbao').hide();
                    
                }, function(err) {
                    alert(err.ErrorInfo);
                });
                layer.closeAll();
            });
        })


    })
    $(document).on('click','.h-portrait',function(){
        $('.sesspart').hide();
        var state = {title:'',url:window.location.href};

        toAccount=$(this).find('.uccc').html();
        $('.title').html($(this).find('.unick').html());

        if (!selToID) {//没有聊天会话
            selType=webim.SESSION_TYPE.C2C;
            selToID=toAccount;
            selSess=sess;
            addSess(selType,toAccount, toAccount, friendHeadUrl, 0, 'sesslist');
            setSelSessStyleOn(toAccount);
            //私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
            // addMsg(msg);
        }else{//有聊天会话
            if(selToID==toAccount){//聊天对象不变
                // addMsg(msg);
            }else{//聊天对象发生改变
                var tempSessDiv = document.getElementById("sessDiv_" + toAccount);
                if(!tempSessDiv){//不存在这个会话
                    addSess(webim.SESSION_TYPE.C2C,toAccount, toAccount, friendHeadUrl, 0, 'sesslist');//增加一个会话
                }

                onSelSess(webim.SESSION_TYPE.C2C,toAccount);//再进行切换
            }
        }
        webim.Tool.setCookie("tmpmsg_" + toAccount, '', 0);
        history.pushState(state,'','friendsss.html?id='+toAccount);
        id=toAccount;
    });
    $('.add_friend').click(function(){
        $('.friend_bigwrap').show();
    });
    $('.wrap>div').eq(0).show();
    $('.fr_nav li').click(function(){
        var index=$(this).index();
        $('.wrap>div').eq(index).show().siblings().hide();
    });


    $(document).on('click','.adddfirends_btn',function(){
        var toUser=$(this).prev().prev().html();
        layer.confirm('确定添加'+toUser+'为好友吗?',{btn: ['确定', '取消'], title: "提示"},function(){
            $.post('/meiyou/addFriend',{toUser:toUser},function(data){

                layer.msg(data.msg,{icon:6,time:800},function(){
                    window.location.reload();
                });
            });
        })
    });

    $(document).on('click','.del_friend',function(e){
        if ( e && e.stopPropagation ) {
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }else {
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
        if (!confirm("确定删除该好友吗？")) {
            return;
        }

        var to_account = [];

        to_account = [
            $(this).parent().prev().find('.uccc').html()
        ];

        if (to_account.length <= 0) {
            return;
        }
        console.log(to_account);
        var options = {
            'From_Account': loginInfo.identifier,
            'To_Account': to_account,
            //Delete_Type_Both'//单向删除："Delete_Type_Single", 双向删除："Delete_Type_Both".
            'DeleteType': $('input[name="df_type_radio"]:checked').val()
        };

        webim.deleteFriend(
            options,
            function (resp) {
                //在表格中删除对应的行
                $('#get_my_friend_table').bootstrapTable('remove', {
                    field: 'Info_Account',
                    values: [ $(this).parent().prev().find('.uccc').html()]
                });
                //重新加载好友列表
                //getAllFriend(getAllFriendsCallbackOK);
                deleteSessDiv(webim.SESSION_TYPE.C2C, $(this).parent().prev().find('.uccc').html());//在最近联系人列表中删除好友(如果存在的话)
                $('#delete_friend_dialog').modal('hide');
                alert('删除好友成功');
                window.location.reload();
            },
            function (err) {
                alert(err.ErrorInfo);
            }
        );

    });
    $(document).on('click','.add_blacklist',function(e){
        if ( e && e.stopPropagation ) {
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }else {
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
        var toUser = $(this).parent().prev().find('.uccc').html();
        console.log(toUser);
        $.post('/meiyou/addBlackList',{toUser:toUser},function(data){
            layer.confirm('确定要将该好友加入黑名单吗?',{btn: ['确定', '取消'], title: "提示"},function(){
                layer.msg(data.msg,{icon:6,time:800},function(){
                    window.location.reload();
                });
            })
        })
    });

    /*移出黑名单*/

    $(document).on('click','.black_list_remove',function(){
    	console.log(1);
    	 var to_account = [
        $(this).parent().find('.black_list_uccon').html()
    ];

    	var options = {
    		'From_Account': loginInfo.identifier,
    		'To_Account': to_account
    	};

    	webim.deleteBlackList(
    		options,
    		function (resp) {
            

            alert('删除黑名单成功');
            window.location.reload();
        },
        function (err) {
        
        	console.log(err.ErrorInfo)
        }
        );
    });
    /*红包*/

    $(document).on('click','.friend2 .hongbao',function(){
        var hid=$(this).attr('data_hongbao');
        var desc=$(this).find('p:nth-child(2)').html();
        console.log(id);
        $.post('/meiyou/shouHongBao',{hid:hid},function(data){

            console.log(data);
            var price=data.extend.meijin;
            var status=data.extend.state;
            if(status=="已领取"){

                window.location.href='unclaimed.html?status='+encodeURI(status)+'&desc='+encodeURI(desc)+'&price='+price;
            }else{
                window.location.href='unclaimed.html?status='+encodeURI(status)+'&desc='+encodeURI(desc)+'&price='+price;
            }
        });
    });



    /*位置消息*/

    $('.sendweizhi').click(function(){
        $('.maps').show();
    });
    $('.send_maps').click(function(){


        if (!selToID) {
            alert("您还没有好友或群组，暂不能聊天");
            return;
        }

        var longitude = localStorage.getItem('wd');
        var latitude = localStorage.getItem('jd');
        var desc = localStorage.getItem('desc');
        var html=$("#map2").html();
        var div="<div style='position:relative;width:200px;height:200px' class='show_maps'>"+html+"<a class='jd'>"+latitude+"</a><a class='wd'>"+longitude+"</a><a class='desc'>"+desc+"</a></div>";
        if (!selSess) {
            selSess = new webim.Session(selType, selToID, selToID, friendHeadUrl, Math.round(new Date().getTime() / 1000));
        }
        var msg = new webim.Msg(selSess, true, -1, -1, -1, loginInfo.identifier, 0, loginInfo.identifierNick);
        var custom_obj = new webim.Msg.Elem.Custom(div,latitude,desc);
        msg.addCustom(custom_obj);

        //调用发送消息接口
        webim.sendMsg(msg, function(resp) {

            if (selType == webim.SESSION_TYPE.C2C) {
                addMsg(msg);
                $('.maps').hide();
                div='';

            }

        }, function(err) {

            console.log(err.ErrorInfo)
        });
    })
    var jd=localStorage.getItem('jd');
    var wd=localStorage.getItem('wd');
    var desc=localStorage.getItem('desc');
    var map = new AMap.Map('containers', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 18, //初始地图级别
        center: [jd, wd], //初始地图中心点

    });
    var map2 = new AMap.Map('map2', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始地图级别
        center: [jd, wd], //初始地图中心点

    });

    var marker1 = new AMap.Marker({
        map:map,
        position:[jd,wd],
        label: {
            offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
            content: "点击到"+desc+"去"
        }
    })
    marker1.on('click',function(e){
        marker1.markOnAMAP({
            name:desc,
            position:marker.getPosition()
        })
    })



    $('.qx').click(function(){
        $('.maps').hide();
    });
    $(document).on('click','.show_maps',function(){
        $('.map3_wap').show();

        var jd=$(this).find('.jd').html();
        var wd=$(this).find('.wd').html();
        var desc=$(this).find('.desc').html();
        $('.map3_wap_send_dz').attr('href','https://gaode.com/regeo?lng="'+jd+'"&lat="'+wd+'"&name="'+desc+'"');
        $('.map3_wap').append("<div id='map3'><div>")
        var map3=new AMap.Map('map3', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 18, //初始地图级别
            center: [jd, wd], //初始地图中心点
        });
        var marker = new AMap.Marker({
            map:map3,
            position:[jd,wd],
            label: {
                offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                content: "点击到"+desc+"去"
            }
        })
        marker.on('click',function(e){
            marker.markOnAMAP({
                name:desc,
                position:marker.getPosition()
            })
        })
    });
    $('.map3_wap_send_qx').click(function(){
        $('.map3_wap').hide();
    });
   $('#ecm_data').on('keyup',function(){
   		if($(this).val()!=''){
   			$('.total div').css('background','red');
   			$('.total p:nth-child(1) span').html($(this).val());
   		}else{
   			$('.total div').css('background','#cbcbcb');
   			$('.total p:nth-child(1) span').html(0);
   		}
   		
   });
</script>
